<!-- 充值积分页面 -->
<template>
  <view class="my-integral-padding" style="height: 100%;">
    <view class="">
      <div style="height:50rpx;"></div>
      <div class="header">
        <div class="back center" @click="back">
          <image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
        </div>
        <p>{{$t('充值积分')}}</p>
        <!-- <div @click="goHistory">
	  			<image src="/static/icon/historyIcon.png" mode="widthFix" class="historySty"></image>
	  		</div> -->
      </div>
    </view>

    <block v-if="vip == true">
      <Integral :points="points" :this_month="this_month" />

      <view
        style="height: 100%; padding-left: 5%; padding-right: 5%; background-color: #fff;border-top-left-radius: 20px; border-top-right-radius: 20px;">
        <p class="detail" style="padding-top: 30px;">{{$t('积分充值')}}</p>
        <!-- 选择金额 -->
        <view class="_list">
          <ol>
            <li v-for="(item, key, index) in list" :key="index" :class="result == index ? 'bianse' : 'bian'"
              @click="clickClass(key, index)">
              <view class="li-text">
                {{ item }} {{$t('积分')}}
              </view>
              <view class="li-money">
                ￥{{ key }}
              </view>
            </li>
          </ol>
        </view>



        <!-- 按钮 -->
        <view class="layout" style="text-align: center;">
          <view class="" style="height: 2rpx; width: 100%;"></view>
          <image src="../../static/waib/queding.png" @click="doBuy" mode="widthFix"
            style=" width: 80%; left: 10%;  position: fixed; bottom: 100rpx;"></image>
        </view>
      </view>

      <payType v-if="showPayType" :show="showPayType" @close="closePayType" @change="changePayType" />
    </block>

    <block v-if="vip == false">

      <view class="popup-warp">
        <image :src="HTTP_IMG_UTL + '/quanxian.png'"
          style="border-radius: 0px;width: 80%; margin-left: 10%; margin-top: 30%;"></image>
      </view>

    </block>
  </view>
</template>

<script>
import Integral from './element.vue'
import payType from "./payType.vue";
import { isMessageGo } from '@/utils/tool.js';

export default {
  data() {
    return {
      HTTP_IMG_UTL: 'https://app.gluz.com.cn/uniappAssets/',


      list: [],
      current: "3",
      points: 0,
      this_month: 0,
      result: null,
      showPayType: false,
      pay_type: 'alipay',
      plat: '',


      vip: true
    };
  },
  components: {
    Integral,
    payType
  },
  onLoad() {
    // 判断是否授权过
    this.getScoreTotals()
    this.plat = uni.getStorageSync('plat')
  },
  onReady() {
    uni.setNavigationBarTitle({
      title: this.$t("我的积分")
    })
  },
  methods: {
    back() {
      this.cback()
    },
    clickClass(value, index) {
      this.result = index
      this.current = value
    },
    //我的积分
    getScoreTotals() {
      var that = this
      uni.request({
        url: 'https://app.gluz.com.cn/api/users/score/getScoreTotal',
        data: {
          user_id: uni.getStorageSync('user_id')
        },
        header: {
          "user_id": uni.getStorageSync('user_id'),
          'xzdToken': uni.getStorageSync('xzdToken'),
          'version': uni.getStorageSync('version'),
          'lang': uni.getStorageSync('lang'),
        },
        success: (res) => {
          that.points = res.data.data.total
          that.this_month = res.data.data.this_month
        }
      });

      uni.request({
        url: 'https://app.gluz.com.cn/api/common/getSite',
        data: {
          user_id: uni.getStorageSync('user_id')
        },
        header: {
          "user_id": uni.getStorageSync('user_id'),
          'xzdToken': uni.getStorageSync('xzdToken'),
          'version': uni.getStorageSync('version'),
          'lang': uni.getStorageSync('lang'),
        },
        success: (res) => {
          that.list = res.data.data.scoreConfig
        }
      });
    },
    closePayType() {
      this.showPayType = false
    },
    changePayType(e) {
      this.pay_type = e
      this.goPay()
    },
    doBuy() {
      const that = this
      if (!that.list[that.current]) {
        that.$u.toast('请选择积分项')
        return
      }

      this.showPayType = true

    },
    goPay() {
      uni.showLoading({
        title: '正在吊起支付..',
      })
      uni.request({
        url: 'https://app.gluz.com.cn/api/users/score/scoreOrder',
        data: {
          user_id: uni.getStorageSync('user_id'),
          openid: '',
          price: this.current,
          score: this.list[this.current],
          method: 'app',
          pay_type: this.pay_type
        },
        method: 'POST',
        header: {
          "user_id": uni.getStorageSync('user_id'),
          'xzdToken': uni.getStorageSync('xzdToken'),
          'version': uni.getStorageSync('version'),
          'lang': uni.getStorageSync('lang'),
        },
        success: (res) => {
          uni.hideLoading({})
          if (res.data.code == 1) {
            if (this.pay_type == 'wxpay') {
              isMessageGo({
                action: 'wxPay',
                data: JSON.stringify(res.data.data)
              })
            }
            if (this.pay_type == 'alipay') {
              isMessageGo({
                action: 'aliPay',
                data: JSON.stringify(res.data.data)
              })
            }
          } else {
            uni.showToast({
              title: res.data.msg || res.data.message,
              icon: 'none',
            })
          }

          this.showPayType = false;


        }
      });
    }
  },



}
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  height: 100%;
  background: #F6F7FB url("/static/bg/backcolorImg.png") no-repeat top / 100%;
}

.header {
  font-size: 34rpx;
  height: 100rpx;
  line-height: 100rpx;
  font-weight: bold;
  text-align: center;
  position: relative;
  padding-top: var(--status-bar-height);
  // padding-top: 18rpx;
}

.back {
  position: absolute;
  width: 70rpx;
  height: 70rpx;
  top: 15rpx;
}

.detail {
  padding-left: 12rpx;
  font-size: 28rpx;

  color: rgba(0, 0, 0, 0.88);
  line-height: 38rpx;
  margin: 27rpx 0 27rpx 0;
  font-weight: 600;
}

._list {

  ol {
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(3, 30%);
    justify-content: space-between;
    grid-gap: 30rpx 0;
    padding: 0;
    max-height: 369rpx;

    li {
      width: 211rpx;
      min-height: 171rpx;
      background: #FFFFFF;
      box-shadow: 3rpx 9rpx 7rpx 0rpx rgba(225, 225, 225, 0.5);
      border-radius: 14rpx;
      color: rgba(0, 0, 0, 0.88);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .li-text {
        padding: 0 20rpx 0 20rpx;
        width: 100%;
        overflow: hidden;
        word-wrap: break-word;
        text-align: center;
        font-size: 28rpx;
        font-weight: 600;
        line-height: 44rpx;
        margin-bottom: 13rpx;
      }

      .li-money {
        font-size: 49rpx;
        font-weight: bold;
        line-height: 49rpx;
        letter-spacing: 1px;
      }
    }
  }
}

.li-color {
  background: linear-gradient(137deg, #DD2910 0%, #F79929 100%) !important;
  box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(240, 240, 240, 0.5) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  border-radius: 14rpx !important;
}

.explain {
  margin-left: 35rpx;
  width: 595rpx;
  font-size: 24rpx;

  font-weight: 400;
  color: rgba(162, 162, 162, 0.88);
  line-height: 31rpx;
}

.explain-text {
  display: flex;
  margin-bottom: 10rpx;
}

.bian {
  background-image: url("../../static/waib/select2.png") !important;
  background-size: 100% 100% !important;
}

.bianse {
  color: #751B00 !important;
  //background: linear-gradient(137deg, #DD2910 0%, #F79929 100%) !important;
  background-image: url("../../static/waib/select.png") !important;
  background-size: 100% 100% !important;
  box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(240, 240, 240, 0.5) !important;
  border-radius: 14rpx !important;
}
</style>
